<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}"/>
    <link th:href="@{//cdn.bootcss.com/highlight.js/9.9.0/styles/xcode.min.css}" rel="stylesheet"/>
    <link th:href="@{/source/pinghsu/source/style.min.css}" rel="stylesheet"/>
    <script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->
<header id="header" class="header bg-white">
    <div class="navbar-container">
        <a  class="navbar-logo" href="/admin/index">
            <img th:src="@{/img/transparent.png}"/>
        </a>
        <div class="navbar-menu" th:each="menu : ${menus}">
            <a th:href="${menu.getMenuUrl()}" th:text="${menu.getMenuName()}" th:target="${menu.getMenuTarget()}"></a>
        </div>
        <div class="navbar-search" onclick="">
            <span class="icon-search"></span>
            <form role="search" onsubmit="return false;">
                <span class="search-box">
                    <input type="text" id="search-inp" class="input" placeholder="搜索..." maxlength="30"
                           autocomplete="off"/>
                </span>
            </form>
        </div>
        <div class="navbar-mobile-menu" onclick="">
            <span class="icon-menu cross"><span class="middle"></span></span>
            <ul>
                <li th:each="menu : ${menus}">
                    <a th:href="${menu.getMenuUrl()}" th:text="${menu.getMenuName()}" th:target="${menu.getMenuTarget()}"></a>
                </li>
            </ul>
        </div>
    </div>
</header>

<div class="main-content index-page clearfix">
    <div class="post-lists">
        <div class="post-lists-body">
            <div class="post-list-item" th:each="article : ${articles}">
                <div class="post-list-item-container">
                    <div class="item-thumb bg-deepgrey" th:href="@{'/post/'+${article.getUrl()}}"
                         th:style="'background-image:url('+${article.getThumbnail()}+');'"></div>
                    <!-- <dir class="item-desc" th:text="${article.tagsName}"></dir> -->
                    <a th:href="@{'/user/post/'+${article.getUrl()}}">
                        <div class="item-desc">
                            <p th:text="${article.getSummary()}"></p>
                        </div>
                    </a>
                    <div class="item-slant reverse-slant &lt; bg-deepgrey"></div>
                    <div class="item-slant"></div>
                    <div class="item-label">
                        <div class="item-title">
                            <a href="#" th:href="@{'/user/post/'+${article.getUrl()}}" th:text="${article.getTitle()}"></a>
                        </div>
                        <div class="item-meta clearfix">
                            <div th:class="'item-meta-ico '+ ${commons.show_icon(article.getId())}"
                                 th:style="'background: url('+@{/img/bg-ico.png}+');no-repeat;background-size: 40px auto;' "></div>
                            <div class="item-meta-cat" th:utext="${commons.show_categories(null,null)}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="lists-navigator clearfix">
    <ol class="page-navigator">
        <th:block th:if="${pageInfo.hasPreviousPage}">
            <li class="prev"><a th:href="@{'/user/page/'+${pageInfo.prePage}}">←</a></li>
        </th:block>
        <th:block th:each="navIndex :${ pageInfo.navigatepageNums}">
            <li th:class="${pageInfo.pageNum==navIndex}?'current':''"><a th:href="@{'/user/page/'+${navIndex}}"
                                                                         th:text="${navIndex}"></a></li>
        </th:block>
        <th:block th:if="${pageInfo.hasNextPage}">
            <li class="next"><a th:href="@{'/user/page/'+${pageInfo.nextPage}}">→</a></li>
        </th:block>

    </ol>
</div>
<script th:inline="javascript">
    $('#search-inp').keypress(function (e) {
        var key=e.which;
        if(key==13){
            var q=$(this).val();
            if(q && q!= ''){
                window.location.href = '/user/search/' + q;
            }
        }
    });
</script>
</body>
</html>